<template>
	<view class="gui-flex gui-space-between gui-padding-x tab" style="height:90rpx;width:100%;background-color: green;">
		<view class="gui-flex gui-justify-content-center gui-align-items-center">
			<view class="title">
				<slot name="title">
					热门商品
				</slot>
			</view>
			<view class="sub-title">
				<slot name="subtitle">
					性价比·极致
				</slot>
			</view>
			
		</view>
		<view class="extra gui-flex gui-justify-content-center gui-align-items-center gui-color-white">
			<slot name="extra">
				查看更多
			</slot>
			<u-icon name="arrow-right" color="#fff"></u-icon>
		</view>
	</view>
</template>

<script lang="ts" setup>
	
</script>

<style lang="scss" scoped>
	.tab{
		background:linear-gradient(90deg,#2862bf,#5c7cfa,#bac8ff);
		border-radius: 4rpx;
		
	}
	.title{
		font-family: "AlibabaPuHuiTi_Bold";
		font-size: 40rpx;
		color:white;
	}
	.sub-title{
		font-weight: bolder;
		font-size: 32rpx;
		color:#54C293;
		margin-left: 12rpx;
	}
	.extra{
		
	}
</style>